<script lang="ts" setup>
	import { ref, onMounted, reactive } from 'vue'
	import { getReport } from '@/api/psychology/report.js'
	import type { BubbleBoxOption } from '@tuniao/tnui-vue3-uniapp'
	import graceJS from "@/Grace6/js/grace.js";
	import { getCurrentInstance } from '@vue/runtime-core';

	const props = defineProps({
		id: ''
	})


	const scale = ref<any[]>([]);
	const answersList = ref<any[]>([]);

	const dimentions = ref<any[]>([]);
	onMounted(() => {
		getReport(props.id).then(res => {
			if (res.data.code == 200) {
				console.log(res)
				scale.value = res.data.data;
				console.log('getReport=====>', res.data.data)
				dimentions.value = res.data.data.dimensionsList
				answersList.value = res.data.data.answerList
				console.log(answersList.value)
			}
		}).catch(error => {
			console.log(error)
		})
	})

	const lead = (pagePath : any) => {
		uni.navigateTo({
			url: pagePath
		})
	}


	const switchIt = (e : any) => {
		switch (e) {
			case "1":
				return 'A';
			case "2":
				return 'B';
			case "3":
				return 'C';
			case "4":
				return 'D';
			case "5":
				return 'E';
			case "6":
				return 'F';
			case "7":
				return 'G';
			case "8":
				return 'H';
			case "9":
				return 'I';
			case "10":
				return 'J';
			case "11":
				return 'K';
			case "12":
				return 'L';
			case "12":
				return 'M';
			default:
				return '';
		}
	}


	const uToastRef = ref()


	const showAnsowerDetail = (item) => {
		console.log('!!!!!!!!!!!!!!!!', uToastRef.value)
		uni.hideToast();
		// uni.showToast({
		// 	title: `题目:${item.index} \r\n ${item.title}`,
		// 	icon: 'none',
		// 	duration: 1000
		// })
		uToastRef.value.show({
			message: `题目:${item.index} ${item.title} \r\n 答案:${item.optTitle}`
		})
		// graceJS.showLoading("Loading ...");
		// this.$refs.uToastRef.show({
		// 	message:''
		// })
	}

	const back = () => {
		// const pages = getCurrentPages()
		// // 有可返回的页面则直接返回，uni.navigateBack  默认返回失败之后会自动刷新页面 ，无法继续返回
		// if (pages.length > 1) {
		// 	uni.navigateBack(1)
		// 	return;
		// }
		// history.back()
		// return;

		uni.navigateTo({
			url: '/pages/evaluation/taskList/taskList'
		})
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>


<template>
<articleTable ref="timer"></articleTable>
	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" @clickLeft="back"
		customLeft title="测评报告" class="absolute" style="height: 3vh;">
	</Navigator>

	<view @touchend="handleEnd" class="wh100p flex column-center"
		style="background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);padding: 3% 4%; box-sizing: border-box;">
		<view class="videoArticle-box wh100p">
			<toast ref="uToastRef" @click=""></toast>

			<scroll-view class="flex-column wh100p" :scroll-y="true" style="padding: 3% 15% 0;box-sizing: border-box;">
				<view class="flex-column">
					<text class="report-title">{{scale?.tabInfo?.name}}</text>
					<text class="font24 colorffffff"
						style="line-height: 30px;border-bottom: 1px solid rgba(255, 255, 255, 0.50);padding: 24px 0;">{{scale?.tabInfo?.createTime}}</text>
				</view>

				<view class="item-text" style="color: white;margin-top: 3%;">
					<view>姓名：{{scale?.stuInfo?.name}}</view>
					<view>性别：{{scale?.stuInfo?.sex}}</view>
					<view v-if="scale?.stuInfo?.birthday !=null">出生日期：{{scale?.stuInfo?.birthday }}</view>
					<view>班级：{{ scale?.stuInfo?.classOrgName}}</view>
					<!-- <view>发布时间：{{scale?.createTime }}</view> -->
				</view>

				<view class="item-text colorffffff" style="color: white;margin-top: 3%;">
					{{scale?.tabInfo?.introduction}}
				</view>
				<view class="flex w100p" style="color: white;margin-top: 2%;flex-wrap:wrap;">
					<view v-for="(an,index2) in answersList" :key="index2">
						<view style="float: left;margin-right: 20rpx;margin-bottom: 10rpx;">
							<u-tag :text="`${index2+1}  ${an.optTitle}`" plain size="large" type="warning"
								@click="showAnsowerDetail(an)"></u-tag>
						</view>
					</view>
				</view>

				<view class="item-text" style="color: white;margin-top: 3%;">
					<view style="margin-top: 20rpx;">
						评价: {{scale.drRemark&&scale.drRemark!=""? scale.drRemark:'请多做运动，保持身心愉悦！'}}
						<!-- 评价: {{'请多做运动，保持身心愉悦！'}} -->
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>


<style>
	.scores {
		color: red;
		font-size: 2rem;
	}

	.deName {
		color: #7fa2e8;
		font-size: 30rpx;
		font-weight: 500;
	}

	.tName {
		font-size: 1rem;
		font-weight: 600;

	}

	.con {
		color: #818181;
		font-size: 1rem;
	}

	.index {
		width: 100%;
		height: 100%;

	}

	.item {
		background-color: orange;
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: white;
		border-radius: 50%;
		float: left;
		margin-left: 20rpx;
		margin-bottom: 10rpx;
	}

	.item-text {
		font-size: 48rpx;
		line-height: 80rpx;
	}

	.card {
		border-radius: 20rpx;
		box-shadow: 0 0 10px #FCE6D0;
		padding: 20rpx;
		margin: 10rpx;
		margin-top: 20rpx;
	}

	.report-title {
		color: #FFF;
		font-family: PingFang SC;
		font-size: 48px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}
</style>